<template>
	<view class="" style="padding-bottom: 80px;">
		<view class="main-wrap" :class="{show:loaded}">
			<view class="address-con">
				<view class="row between" style="padding: 0 20upx;min-height: 110upx;" @tap="navTo(`/pages/address/myAddress?source=1&id=${address.id}`)">
					<view class="row between" style="align-items: flex-start;">
						<image src="/static/img/dizhi.png" mode="" class="di-icon"></image>
						<view class="user-info" v-if="address.id">
							<view class="">
								<text class="user-name">{{ address.name }}</text>
								<text class="user-name">{{ address.phone }}</text>
							</view>
							<view class="">
								<text class="user-adr">地址：</text>
								<text class="user-adr">{{ address.province }}{{ address.city }}{{ address.county }}{{ address.detail }}</text>
							</view>
						</view>
						<view class="user-info" v-else>请选择地址</view>
					</view>
					<u-icon name="arrow-right" size="26" color="#333333"></u-icon>
				</view>
				<image src="/static/img/line.png" class="line"></image>
			</view>
			
			<view class="" v-for="(item, index) in dataList" :key="index">
				<view class="order-info-con">
					<view class="order-info row between">
						<view class="cart-item-img"><image :src="item.icon" mode="aspectFill" class="img"></image></view>
						<view class="cart-item-right fill">
							<view class="clamp2 cart-item-title">{{ item.name }}</view>
							<view class="row between" style="padding-top: 10upx;">
								<view class="cart-item-price">￥{{ item.price }}</view>
								<view class="cart-item-num">x1</view>
							</view>
						</view>
					</view>
					<view class="row between" style="padding: 20upx;">
						<view class="cart-item-num" style="color: #999999;">快递运费</view>
						<view class="cart-item-num" style="color: #333333;" v-if="!item.freight || item.freight == 0">免运费</view>
						<view class="cart-item-num" style="color: #333333;" v-else>￥{{ item.freight }}</view>
					</view>
				</view>
				<view class="" style="padding: 20upx;">
					<view class="order-r-title">订单备注</view>
					<textarea class="textarea" value="" v-model="item.remarks" placeholder="有什么想说的要告诉商家吗？" />
				</view>
			</view>
			
			<view class="order-footer row between" v-if="totalPrice != 0">
				<view class="row">
					<text class="order-footer-tips">实付金额:</text>
					<text class="order-footer-money">￥{{ totalPrice }}</text>
				</view>
				<view class="order-footer-btn" hover-class="hover-opacity" @tap="creatOrder">提交订单</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import orderMinixs from "./mixin/order.js"
export default {
	mixins:[orderMinixs],
	data() {
		return {
			totalPrice: 0,
			dataList: [],
			address: {}
		};
	},
	onLoad() {
		this.initOrderData();
		this.getUserAddress();
	},
	methods: {
		initOrderData() {
			let data = getApp().globalData.creatOrderDataInfo,price=0;
			this.type = data.type;
			data.list.forEach(item => {
				item.remarks = "";
				item.itemPrice = 0;
				item.itemPrice = item.freight ? Number(item.freight) + Number(item.price) : Number(item.price);
				price += item.itemPrice;
			});
			this.totalPrice = price;
			this.dataList = data.list;
		},
		setAddress(item) {
			if (item) {
				this.address = item;
			} else {
				this.address = {};
			}
		},
		async getUserAddress(){
			const data = {
				uid: uni.getStorageSync("uid")
			};
			const res = await this.$request("address/list", data, {showLoading: true});
			if (res.result ==0) {
				if(res.dataList && res.dataList.length!=0){
					res.dataList.forEach(item=>{
						if(item.isDefault==1){
							this.address=item;
						}
					})
				}
			}else{
				this.$util.msg(res.resultNote);
			}
		},
		creatOrder() {
			this.$util.throttle(async () => {
				if (!this.address.id) {
					this.$util.msg("请先选择收货地址!");
					return;
				}
				let goods=new Array(),len=0;
				this.dataList.forEach(item=>{
					len++;
					let infoItem={
						id:item.id,
						remarks:item.remarks,
						price:item.itemPrice
					}
					goods.push(infoItem);
				})
				if(len==this.dataList.length){
					const data = {
						uid: uni.getStorageSync("uid"),
						addressId: this.address.id,
						price: this.totalPrice,
						type: this.type,
						goods
					};
					const res=await this.$request("goods/order-create",data,{showLoading:true});
					if(res.result==0){
						uni.$emit('upDate');
						this.pay(res.data,'creat');
					}else{
						this.$util.msg(res.resultNote)
					}
				}
				
			});
		}
	}
};
</script>

<style scoped lang="scss">
.di-icon {
	width: 40upx;
	height: 40upx;
	margin-right: 10upx;
}
.address-con {
	padding: 30upx 0;
	position: relative;
}
.user-info {
	width: 94%;
}
.user-name {
	font-size:32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.user-adr {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	display: inline;
}
.line {
	position: absolute;
	bottom: 0;
	left: 5upx;
	width: 740upx;
	height: 6upx;
}
.order-info-con {
	border-top: 10upx solid #ededed;
	border-bottom: 10upx solid #ededed;
}
.order-info {
	padding: 20upx;
}
.cart-item-img {
	width: 164upx;
	height: 164upx;
	border-radius: 10upx;
	overflow: hidden;
}
.img {
	width: 164upx;
	height: 164upx;
}
.cart-item-right {
	padding-left: 20upx;
	height: 164upx;
}
.cart-item-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 36upx;
}
.cart-item-price {
	font-size: 33upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
}
.cart-item-num {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
	line-height: 36upx;
}
.order-r-title {
	line-height: 80upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.textarea {
	width: 100%;
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
}
.order-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	border-top: 1px solid rgba(215, 215, 215, 0.31);
	padding-top: 20upx;
	padding-left: 20upx;
	padding-right: 20upx;
	padding-bottom:var(--status-bar-height);
	background: #ffffff;
	z-index: 999;
}
.order-footer-btn {
	width: 259upx;
	height: 70upx;
	text-align: center;
	line-height: 70upx;
	background: #cc1313;
	border-radius:40upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.order-footer-tips {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.order-footer-money {
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
}
</style>
